﻿@{
    ViewData["Title"] = "CreateProductDetail";
    Layout = null;
}

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加商品</title>
    <link href="~/libs/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
    <style>
        .layui-form-label {
            width: 120px;
        }

        .layui-input-block {
            margin-left: 150px;
        }

        .layui-container {
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="layui-container">
        <form class="layui-form" id="productForm">
            <!-- 基本信息 -->
            <fieldset class="layui-elem-field">
                <legend>基本信息</legend>
                <div class="layui-field-box">
                    <div class="layui-form-item">
                        <label class="layui-form-label">商品编码</label>
                        <div class="layui-input-block">
                            <div class="layui-inline">
                                <input type="text" name="productCode" required lay-verify="required" placeholder="请输入商品编码" class="layui-input">
                            </div>  

                            <div class="layui-inline">
                                <input type="checkbox" lay-skin="switch" lay-filter="switchTest">自动生成
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">商品名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="productName" required lay-verify="required" placeholder="请输入商品名称" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">SKU</label>
                        <div class="layui-input-block">
                            <input type="text" name="sku" required lay-verify="required" placeholder="请输入SKU" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">价格</label>
                        <div class="layui-input-block">
                            <input type="number" name="price" required lay-verify="required|number" placeholder="请输入价格" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">重量</label>
                        <div class="layui-input-block">
                            <input type="number" name="weight" required lay-verify="required|number" placeholder="请输入重量" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">体积</label>
                        <div class="layui-input-block">
                            <input type="number" name="volume" required lay-verify="required|number" placeholder="请输入体积" class="layui-input">
                        </div>
                    </div>
                </div>
            </fieldset>

            <!-- 分类信息 -->
            <fieldset class="layui-elem-field">
                <legend>分类信息</legend>
                <div class="layui-field-box">
                    <div class="layui-form-item">
                        <label class="layui-form-label">所属货主</label>
                        <div class="layui-input-block">
                            @* 动态绑定货主下拉框 *@
                            <select name="belongsOwner" lay-verify="required">
                                <option value="">请选择货主</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">产品大类</label>
                        <div class="layui-input-block">
                            <select name="productCategories" lay-verify="required">
                                <option value="">请选择产品大类</option>
                                <option value=0>电缆</option>
                                <option value=1>恒温</option>
                                <option value=2>常温</option>
                                <option value=3>调温</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">产品属性</label>
                        <div class="layui-input-block">
                            <select name="productAttributes" lay-verify="required">
                                <option value="">请选择产品属性</option>
                                <option value=0>电缆</option>
                                <option value=1>数码产品</option>
                                <option value=2>日用</option>
                            </select>
                        </div>
                    </div>
                </div>
            </fieldset>

            <!-- 规格信息 -->
            <fieldset class="layui-elem-field">
                <legend>规格信息</legend>
                <div class="layui-field-box">
                    <div class="layui-form-item">
                        <label class="layui-form-label">商品规格</label>
                        <div class="layui-input-block">
                            <input type="text" name="productSpecifications" required lay-verify="required" placeholder="请输入商品规格" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">商品品牌</label>
                        <div class="layui-input-block">
                            <input type="text" name="productBranding" required lay-verify="required" placeholder="请输入商品品牌" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">商品单位</label>
                        <div class="layui-input-block">
                            <select name="unit" lay-verify="required">
                                <option value="">请选择单位</option>
                                <option value=0>件</option>
                                <option value=1>箱</option>
                                <option value=2>个</option>
                                <option value=3>桶</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">计费商品类</label>
                        <div class="layui-input-block">
                            <select name="billableItems" lay-verify="required">
                                <option value="">计费商品类</option>
                                <option value=0>整拖</option>
                                <option value=1>轻抛按箱</option>
                                <option value=2>轻抛5kg以上</option>
                                <option value=3>计费吨</option>
                            </select>
                        </div>
                    </div>
                </div>
            </fieldset>

            <!-- 物流信息 -->
            <fieldset class="layui-elem-field">
                <legend>物流信息</legend>
                <div class="layui-field-box">
                    <div class="layui-form-item">
                        <label class="layui-form-label">长</label>
                        <div class="layui-input-block">
                            <input type="number" name="long" required lay-verify="required|number" placeholder="请输入长" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">宽</label>
                        <div class="layui-input-block">
                            <input type="number" name="wide" required lay-verify="required|number" placeholder="请输入宽" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">高</label>
                        <div class="layui-input-block">
                            <input type="number" name="high" required lay-verify="required|number" placeholder="请输入高" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">保质期</label>
                        <div class="layui-input-block">
                            <input type="number" name="shelfLife" required lay-verify="required|number" placeholder="请输入保质期" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">允收天数</label>
                        <div class="layui-input-block">
                            <input type="number" name="acceptableDays" required lay-verify="required|number" placeholder="请输入允收天数" class="layui-input">
                        </div>
                    </div>
                </div>
            </fieldset>

            <!-- 库存信息 -->
            <fieldset class="layui-elem-field">
                <legend>库存信息</legend>
                <div class="layui-field-box">
                    <div class="layui-form-item">
                        <label class="layui-form-label">最小库存量</label>
                        <div class="layui-input-block">
                            <input type="number" name="numLnventoryLevels" required lay-verify="required|number" placeholder="请输入最小库存量" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">码盘单层数量</label>
                        <div class="layui-input-block">
                            <input type="number" name="codeDiscNumber" required lay-verify="required|number" placeholder="请输入码盘单层数量" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">码盘层高</label>
                        <div class="layui-input-block">
                            <input type="number" name="discLayerHeight" required lay-verify="required|number" placeholder="请输入码盘层高" class="layui-input">
                        </div>
                    </div>
                </div>
            </fieldset>

            <!-- 拆零信息 -->
            <fieldset class="layui-elem-field">
                <legend>拆零信息</legend>
                <div class="layui-field-box">
                    <div class="layui-form-item">
                        <label class="layui-form-label">拆零控制</label>
                        <div class="layui-input-block">
                            <select name="tearDownControl" lay-verify="required">
                                <option value="">请选择拆零控制</option>
                                <option value=0>是</option>
                                <option value=1>否</option>
                                <option value=2>初始</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">拆零单位</label>
                        <div class="layui-input-block">
                            <select name="splitUnits" lay-verify="required">
                                <option value="">请选择拆零单位</option>
                                <option value=0>件</option>
                                <option value=1>箱</option>
                                <option value=2>个</option>
                                <option value=3>桶</option>
                            </select>
                        </div>

                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">拆零数量</label>
                        <div class="layui-input-block">
                            <input type="number" name="splitNumber" required lay-verify="required|number" placeholder="请输入拆零数量" class="layui-input">
                        </div>
                    </div>
                </div>
            </fieldset>

            <!-- 操作按钮 -->
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formSubmit">录入</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>

    <script src="~/libs/jquery/jquery.js"></script>
    <script src="~/libs/layui-v2.5.6/layui/layui.js"></script>
    <script>
        layui.use(['form'], function () {
            var form = layui.form;

                      // 监听复选框变化，自动生成客户编码
            form.on('switch(switchTest)', function (data) {
                if (data.elem.checked) {
                    // 生成随机字母+数字的编码并设置到CustomerCode输入框中
                    var randomNum = Math.floor(Math.random() * 10) + '';
                    for (var i = 0; i < 2; i++) {
                        randomNum += Math.floor(Math.random() * 10);
                    }
                    randomNum = 'SP00' + randomNum;
                    $('input[name="productCode"]').val(randomNum);

                }
                else {
                    $('input[name="productCode"]').val('');
                }
            });

            // 表单提交
            form.on('submit(formSubmit)', function (data) {
                      // 将数值字段转换为数值类型
                data.field.price = parseFloat(data.field.price);
                data.field.weight = parseFloat(data.field.weight);
                data.field.wide = parseFloat(data.field.wide);
                data.field.long = parseFloat(data.field.long);
                data.field.high = parseFloat(data.field.high);
                data.field.volume = parseFloat(data.field.volume);
                data.field.shelfLife = parseFloat(data.field.shelfLife);
                data.field.belongsOwner = parseInt(data.field.belongsOwner);
                data.field.productCategories = parseInt(data.field.productCategories);
                data.field.productAttributes = parseInt(data.field.productAttributes);
                data.field.unit = parseInt(data.field.unit);
                data.field.acceptableDays = parseInt(data.field.acceptableDays);
                data.field.billableItems = parseInt(data.field.billableItems);
                data.field.codeDiscNumber = parseInt(data.field.codeDiscNumber);
                data.field.discLayerHeight = parseInt(data.field.discLayerHeight);
                data.field.tearDownControl = parseInt(data.field.tearDownControl);
                data.field.splitUnits = parseInt(data.field.splitUnits);
                data.field.splitNumber = parseInt(data.field.splitNumber);
                data.field.numLnventoryLevels = parseInt(data.field.numLnventoryLevels);
                data.field.itemBarcode="1";
                // 提交表单数据
                console.log(data.field);
                // 提交到后端接口
                $.ajax({
                    url: '/ProductDetail/CreatePrdouctDetails', // 提交地址
                    type: 'post',
                    data: data.field,
                    dataType: 'json',
                    success: function (res) {
                        if (res==1) {
                            //延时加载返回列表页面
                            setTimeout(function () {
                               returnList();
                            }, 500);
                            layer.msg('录入成功');
                        } 
                        else if(res==-1){
                            layer.msg('商品编号已存在');
                        }
                        else {
                            layer.msg('录入失败');
                        }
                    }
                });
                return false; // 阻止表单默认提交
            });
        });


        // 延时加载返回列表页面
        function returnList() {
            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            parent.layer.close(index); //再执行关闭
        }

        /// 动态绑定货主下拉框
         layui.use(['form'], function () {
            var form = layui.form;
           $(function () {
                    $.ajax({
                        url: '/ProductDetail/BindClientName', // 获取货主列表地址
                        type: 'get',
                        dataType: 'json',
                        success: function (res) {
                            if (Array.isArray(res)) { // 确保返回的是数组
                                var options = '<option value="">请选择货主</option>'; // 默认选项
                                $.each(res, function (i, item) {
                                    if (item.id && item.chineseName) { // 确保数据字段存在
                                        options += '<option value="' + item.id + '">' + item.chineseName + '</option>';
                                    }
                                });
                                $('select[name="belongsOwner"]').html(options); // 填充下拉框
                                form.render('select'); // 刷新选择框渲染
                            } else {
                                console.error('返回数据格式不正确');
                                layer.msg('获取货主列表失败，数据格式不正确', { icon: 2 });
                            }
                        },
                        error: function () {
                            console.error('获取货主列表失败');
                            layer.msg('获取货主列表失败，请稍后重试', { icon: 2 });
                        }
                    });
                });
            });

    </script>
</body>
</html>